
  <template>
    <div class="talents" style="width: 100%;overflow: hidden;">
      <div style=" margin-top: 20px; display: flex;padding: 0px 20px;border-bottom: 1px solid #0270c1;background-color: white;width: 95%;margin-left: 12px">
        <div>
          <img src="/src/assets/hy/zhiwei.png" height="30" width="30" style="margin: 5px 10px 0px 0px"/>
        </div>
        <div style="text-align: center;line-height: 40px;">我的关注：</div>
      </div>
      <div style="background:white;width: 98%;margin: 20px 1% 0px">
        <el-input v-model="talents.talentsName" placeholder="人才姓名" style="width: 200px;margin: 20px 20px "/>
        <el-input v-model="talents.talentsPhone" placeholder="电话号码" style="width: 200px;margin: 20px 0px "/>
        <el-button @click="selecttalentpool()" type="primary" style="margin-left: 20px">搜索</el-button>
        <el-button  @click="qingkong()"  plain>重置</el-button>
        <el-button @click="addTalentpool()" type="primary" style="float: right;margin: 20px 30px">新增人才</el-button>
<!--        <div style="float: right;margin: 20px 30px 0px 0px">-->
<!--          <el-dropdown style="margin-left: 20px">-->
<!--            <el-button type="primary">-->
<!--              更多<el-icon class="el-icon&#45;&#45;right"><arrow-down /></el-icon>-->
<!--            </el-button>-->
<!--            <template #dropdown>-->
<!--              <el-dropdown-menu>-->
<!--                <el-dropdown-item><span @click="addTalentpool()">新增人才</span></el-dropdown-item>-->
<!--                <el-dropdown-item><span>导入</span></el-dropdown-item>-->
<!--                <el-dropdown-item><span>导出</span></el-dropdown-item>-->
<!--              </el-dropdown-menu>-->
<!--            </template>-->
<!--          </el-dropdown>-->
<!--        </div>-->
      </div>
      <el-table
          ref="multipleTableRef"
          :data="d.tableData"
          style="width: 98%;height: 455px;margin: auto"
          :header-cell-style="{background:'#f5f7fa'}"
          stripe
      >

        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="姓名" width="120">
          <template #default="scope"><el-button @click="editTalentpool(scope.row)">{{ scope.row.talentsName }}</el-button></template>
        </el-table-column>
        <el-table-column align="center" property="talentsAge" label="年龄" width="120"/>
        <el-table-column align="center" property="talentsPosition" label="应聘岗位" />
        <el-table-column align="center" property="talentsPhone" label="电话号码" />
        <el-table-column align="center" label="人才标签" >
          <template #default="scope">
            <div v-if="scope.row.talentsTalenttag == '高学历' " style="background:rgb(234,242,251);color:#446af3;height:30px;width:60%;margin:0 20% 0;font-size: 15px;line-height: 30px">
              {{ scope.row.talentsTalenttag }}
            </div>
            <div v-if="scope.row.talentsTalenttag == '技术达人' " style="background:rgb(217,246,229);color:#479d5c;height:30px;width:60%;margin:0 20% 0;font-size: 15px;line-height: 30px">
              {{ scope.row.talentsTalenttag }}
            </div>
            <div v-if="scope.row.talentsTalenttag == '经验丰富' " style="background:rgb(255,233,233);color:#be00fc;height:30px;width:60%;margin:0 20% 0;font-size: 15px;line-height: 30px">
              {{ scope.row.talentsTalenttag }}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="学历">
          <template #default="scope">
            {{ scope.row.talentsEducation }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="工作经验">
          <template #default="scope">
            {{ scope.row.talentsExperience }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="添加/取消关注" >
          <!--按钮需要使用插槽才能取到当前行的值-->
          <template #default ="s" >
            <el-button v-if="s.row.talentpoolEmps[0].empId == store.state.user.sysEmployee.empId " @click="delguanzhu(s.row.talentsId)" type="danger" plain style="font-size: 12px;width: 60px;height: 30px;">
              取消关注
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" >
          <!--按钮需要使用插槽才能取到当前行的值-->
          <template #default ="s" >
            <el-button @click="miasnhi(s.row)" type="primary" plain style="font-size: 13px;width: 60px;height: 30px;">
              安排面试
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-row justify="center">
          <el-col>
            <el-pagination
                v-model:currentPage="d.pageNo"
                v-model:page-size="d.pageSize"
                :page-sizes="[5,10, 20, 30, 40]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="d.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </div>
    </div>

  </template>

  <script lang="ts" setup>
    import {onBeforeMount, reactive, ref, toRefs} from 'vue'
    import axios from "axios";
    import {ElMessage,ElMessageBox} from "element-plus";
    import {useRouter} from "vue-router";
    import {useStore} from "vuex";
    const input = ref('')
    let dialogFormVisible = ref(false)
    const form = reactive({
      name: '',
      talentsName:'',
      talentsPhone:'',
      region: '',
      date1: '',
      date2: '',
      type: [],
      age:'',
      post:'',
      channel:'',
      education:'',
      experience:'',
      phone:'',
    })
    //当前登录这的信息
    const store=useStore();
    const d = reactive({
      //table当前展示的数据
      list:null,
      //总记录
      total:0,
      //页码
      pageNo:1,
      //页大小
      pageSize:10,
      //数据
      tableData:[],
    });
    //进入面试安排页面
    const miasnhi=(row)=>{
      router.push({path:"/Recruitment/interview/InterviewArrangementProcess",query:{id:row.talentsId}})
    }
    const router=useRouter();
    //进入简历详情页面
    const editTalentpool = (row)=>{
      router.push({path:"/Recruitment/resume/tiao",query:{id:row.talentsId}})
    }
    const addTalentpool = ()=>{
      router.push({path:"/Recruitment/resume/tiao",query:{id:3}});
    }

    //条件查询表单数据模型
    let  talents= reactive({
      talentsName:'',
      talentsPhone:'',
      empId:store.state.user.sysEmployee.empId,
    })
    //清空输入框的条件
    const qingkong=()=>{
      talents.talentsName='',
          talents.talentsPhone='',
          wodeguanzhu()
    }
    //取消关注
    let delgz=ref();
    const delguanzhu=(talentsId)=>{
      axios.delete("personnelOa/talentpool/delguanzhu/"+talentsId+"/"+store.state.user.sysEmployee.empId)
          .then((res)=>{
            delgz.value = res.data.data
            console.log(ID.value)
            if (delgz.value = 1){
              ElMessage({
                type: 'success',
                message: '取消成功',
              })
              wodeguanzhu()
            }else {
              ElMessage({
                type: 'success',
                message: '取消失败',
              })
            }
          })
    }
    //查询我的关注
    const wodeguanzhu=()=>{
      axios.post("personnelOa/talentpool/wodeguanzhu/"+store.state.user.sysEmployee.empId)
          .then((res)=>{
            d.tableData =res.data.data;
            ALltableData.value = d.tableData;//放入表格
            d.total = res.data.data.length;//获得它的长度

          })
    }
    //条件查询出人才
    const selecttalentpool=()=>{
      axios.post("personnelOa/talentpool/selectguanzhu",talents)
          .then((res)=>{
            d.tableData =res.data.data;
            ALltableData.value = d.tableData;//放入表格
            d.total = res.data.data.length;//获得它的长度


          })
          .catch()
    }
    const ALltableData=ref([])
    const getTabelData=()=>{//分页，这里没必要管一样就行
      let data =JSON.parse(JSON.stringify(ALltableData.value));//把数据转为JSON格式
      let shu = data.splice(
          (d.pageNo - 1) * d.pageSize,
          d.pageSize
      )
      d.tableData = shu ;
    }

    const handleSizeChange = (val: number) => {//分页，这里没必要管一样就行
      d.pageSize = val ;
      d.pageNo = 1;
      getTabelData();
    }

    const handleCurrentChange = (val: number) => {//分页，这里没必要管一样就行
      console.log("翻页，当前为第几页", val)
      d.pageNo = val;
      getTabelData();
    }
    //一进页面就调用
    onBeforeMount(()=>{
      wodeguanzhu()
    })
    //表单数据模型
    let Talentpool = reactive({

      talentsName:'',
      talentsSex:'',
      talentsAge:'',
      talentsBirthday:'',
      talentsPosition:'',
      talentsChannel:'',
      talentsEducation:'',
      talentsExperience:'',
      talentsPhone:'',
      talentsTime:'',
      talentsTechnology:'',
      talentsState:'',
      talentsMailbox:'',
      talentsId:'',
      talentsTalenttag:'',
      talentsNative:'',
      talentsMarriage:'',
      talentsQq:'',
      talentsAnniu:'',
      empId:store.state.user.sysEmployee.empId,
    })


    const centerDialogVisible = ref(false)
    let ID = ref();
    const qqq = (id)=>{
      ID.value = id;
      centerDialogVisible.value = true

    }


    const {tableData} = toRefs(d);
  </script>

  <style scoped>

    .talents{
      /*border: red solid 1px;*/
      background: #F1F1F1;
      /*height: 100%;*/
      /*width: 100%;*/
    }
    .dialog-footer button:first-child {
      margin-right: 10px;
    }
  </style>


